<template>
  <div class="journalingContent">
    <!-- 审核进度区域 -->
    <div class="journalingHead" v-loading="loadingHead1">
      <div class="headNav">
        <div class="txt1">{{ pageTypeName[pageType - 1] }}进度</div>
        <div class="btn default" :class="{
          sts1: auditFinanceVo.currentStatus == 100 || auditFinanceVo.currentStatus == 3,
          sts2: auditFinanceVo.currentStatus == 0,
          sts3: auditFinanceVo.currentStatus == 101 || auditFinanceVo.currentStatus == 2,
          sts4: auditFinanceVo.currentStatus == -1,
        }">
          {{ auditFinanceVo.plan }}
        </div>
        <div class="point" v-if="failMsg">驳回原因：{{ failMsg || '暂无' }}</div>
        <!-- <span class="czSpan" @click="journalingApproveShowFun"> 审核记录 </span> -->
        <span class="downloadFile1" @click="downloadFunFile1"> 下载源文件 </span>
      </div>
      <div class="tipText" v-if="axhFinance.fbStatus">二次修改审核</div>
      <div class="stepsNav" v-loading="stepItemShow">
        <!-- * 0 等待审核（蓝色）
        * 1 等待审核（灰色）
        * 2 已通过审核
        * 3 当前阶段已被驳回 -->
        <div class="stepItem" v-for="(item, index) in axhAuditFinanceLogVos" :key="index">
          <div class="stepNum">
            <div class="iconOrder state0" style="color: #2c83e4" v-if="item.wait == 0">
              {{ index + 1 }}
            </div>
            <div class="iconOrder state1" style="color: #d8d8d8" v-if="item.wait == 1 || item.wait == null">
              {{ index + 1 }}
            </div>
            <div class="iconOrder state2" style="color: #2c83e4" v-if="item.wait == 2">
              {{ index + 1 }}
            </div>
            <img v-if="item.wait == 3" src="@/assets/image/close3.png" />
            <template v-if="!(index + 1 == axhAuditFinanceLogVos.length)">
              <div class="iconLine state0" v-if="axhAuditFinanceLogVos[index + 1].wait == 0"></div>
              <div class="iconLine"
                v-if="axhAuditFinanceLogVos[index + 1].wait == 1 || axhAuditFinanceLogVos[index + 1].wait == null"></div>
              <div class="iconLine state0" v-if="axhAuditFinanceLogVos[index + 1].wait == 2"></div>
              <div class="iconLine state3" v-if="axhAuditFinanceLogVos[index + 1].wait == 3"></div>
            </template>
          </div>
          <div class="stepCont">
            <div class="tit"
              :class="{ c00: item.wait == 0, c11: item.wait == 1, c00: item.wait == 2, c33: item.wait == 3 }">
              {{ item.username }}
            </div>
            <p :class="{ c00: item.wait == 0, c11: item.wait == 1, c00: item.wait == 2, c33: item.wait == 3 }">
              {{ item.waitStr }}
            </p>
            <p>{{ item.createTime }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮区域 可使用fromTo区分操作 -->
    <div class="btnContent">
      <el-form inline>
        <el-form-item label="标题: ">
          <el-input style="width: 199px;" maxlength="50" :disabled="auditFinanceVo.currentStatus != -1"
            v-model="auditFinanceVo.financeTitle" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="类型: " v-if="oneTypeList && oneTypeList.length">
          <el-select :disabled="auditFinanceVo.currentStatus != -1" v-model="auditFinanceVo.systemTypeId"
            placeholder="请选择">
            <el-option v-for="item in oneTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间: ">
          <el-date-picker :clearable="false" :disabled="auditFinanceVo.currentStatus != -1"
            v-model="auditFinanceVo.createTime" type="month" placeholder="请选择" format="YYYY-MM"
            value-format="YYYY-MM-DD" />
        </el-form-item>
      </el-form>

      <div class="rightCont">
        <!-- 当前报表的状态 - financeStatus
        1、已通过
        2、审核中
        3、驳回
        4、草稿 -->
        <!-- 跨级查看审批表时无法去进行操作 -->

        <div class="btn info" v-if="btnControl && btnControl.isSave"
          @click="saveReport($event, pictureData.join(','), 4)">
          保存
        </div>
        <div class="btn info" @click="lookVoucher">
          凭证
        </div>
        <div class="btn info" v-if="btnControl && btnControl.isSubmit" @click="submitAudit">
          <img class="img" src="@/assets/image/jourBtn1.png" alt="" />
          提交
        </div>
        <div class="btn info" v-if="btnControl && btnControl.isDel" @click="deleteReport">
          <img class="img" src="@/assets/image/jourBtn3.png" alt="" />
          删除
        </div>
        <div class="btn info" v-if="btnControl && btnControl.isCaoGao" @click="transferDraft">
          <img class="img" src="@/assets/image/jourBtn2.png" alt="" />
          转为草稿
        </div>
        <div class="btn info" v-if="auditFinanceVo.currentStatus == 100 || auditFinanceVo.currentStatus == 3"
          @click="publicReport(auditFinanceVo.isPublic)">
          <img class="img" src="@/assets/image/jourBtn1.png" alt="" />
          {{ auditFinanceVo.isPublic === 1 ? '取消公开' : '公开' }}
        </div>

        <div class="btn success" v-if="btnControl && btnControl.isSuccess" @click="agreePassAudit(1)">通过</div>
        <div class="btn warning" v-if="btnControl && btnControl.isSuccess" @click="openRefuseAuditWin">驳回</div>
      </div>
    </div>

    <!-- 内容图片展示区域 -->
    <div class="reportBox">
      <img v-if="fileSuffixType1.includes(fileSuffix)" class="reportBoxImg" :src="auditFinanceVo.sourceFileUrl" />
      <iframe v-if="fileSuffixType2.includes(fileSuffix)" :src="auditFinanceVo.sourceFileUrl" frameborder="0" width="100%"
        height="800"></iframe>
      <iframe v-if="fileSuffixType3.includes(fileSuffix)"
        :src="'https://view.officeapps.live.com/op/view.aspx?src=' + auditFinanceVo.sourceFileUrl" frameborder="0"
        width="100%" height="800"></iframe>

    </div>
    <!-- <div class="noList">
      <img src="@/assets/image/noData1.png" />
      <div class="textTip">暂无数据</div>
    </div> -->


    <!-- 审批操作日志窗口 -->
    <el-dialog :close-on-click-modal="false" v-model="journalingApproveShow" width="520px" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">审核记录</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="fromLabel">
        <div class="approveWin">
          <div :key="index" v-for="(item, index) in findAuditLogRecordList" class="stepItem">
            <div class="stepNum">
              <div class="iconOrder">
                {{ findAuditLogRecordList.length - index }}
              </div>
              <template v-if="!(index + 1 == findAuditLogRecordList.length)">
                <div class="iconLine"></div>
              </template>
            </div>
            <div class="stepCont">
              <div class="tit">
                <span style="color: #35353f">{{ item.logContent }}</span>
                <el-popover v-if="item.isTurn === 1" placement="bottom" :width="200" trigger="hover"
                  :content="item.remark">
                  <template #reference>
                    <img class="spanIcon" src="@/assets/image/jourTip2.png" alt="" />
                  </template>
                </el-popover>
              </div>
              <p>{{ item.createTime }}</p>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 拒绝理由弹出 -->
    <el-dialog :close-on-click-modal="false" v-model="refuseAuditVisible" title="拒绝理由" width="40%">
      <el-form label-width="100px">
        <el-form-item label="拒绝理由: ">
          <el-input type="textarea" :rows="5" show-word-limit maxlength="255" placeholder="请输入拒绝理由" style="width: 90%"
            v-model="refuseMsg"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="refuseAuditVisible = false">取消</el-button>
          <el-button type="primary" @click="agreePassAudit(0)"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 查看凭证 -->
    <pictureLibrary @close="closeVoucher" @addVoucherImage="addVoucherImage" @delectPicture="delectPicture"
      :pictureData="pictureData" :pictureDataName="pictureDataName" :layout="pictureLibrarylayout"
      :show="pictureLibraryShow"></pictureLibrary>
  </div>
</template>

<script>
import request from '@/utils/request'
import PictureLibrary from '@/components/PictureLibrary.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'financeJournaling',
  components: {
    PictureLibrary,
  },
  data() {
    return {
      fromTo: '',
      financeId: '',
      pageType: '',
      journalingApproveShow: false,
      approvalMsgShow: false,
      pictureLibraryShow: false,
      isYesRevise: false,
      pictureLibrarylayout: '',
      findAuditLogRecordList: [],
      stepItemShow: true,
      loadingHead1: false,
      loadingHead2: false,
      pictureData: [],
      pictureDataName: '',
      parentBaseData: {},
      operationType: '', // 1 编辑  2 添加
      findFinanceData: [],
      btnRole: {},
      axhFinance: {},
      financeTitleCopy: '',
      createTimeCopy: '',
      financeReports: [],
      journalingApproveShowLoading: false,
      financeReportsType2: [],
      remarkInput: '',
      disabledDate: (time) => {
        return time.getTime() > Date.now()
      },
      pageTypeName: ['镇级党务公开审核', '镇级政务公开审核', '镇级财务公开审核', '党务公开审核', '村务公开审核', '财务公开审核', '资金管理审核', '资源管理审核', '资产管理审核'],
      textContent: '',
      fileSuffix: '',
      fileSuffixType1: ['PNG', 'png', 'JPG', 'jpg'],
      fileSuffixType2: ['PDF', 'pdf', 'TXT', 'txt'],
      fileSuffixType3: ['xlsx', 'xls', 'docx', 'doc', 'pptx', 'ppt'],
      financeBtnVo: {},
      refuseAuditVisible: false,
      isEditReport: false,
      cwTypeList: [],
      addressType: '',
      failMsg: '',
      refuseMsg: '',
      auditFinanceVo: {},
      financeImgList: [],
      axhAuditFinanceLogVos: [],
      btnControl: {},
      oneTypeList: []
    }
  },
  activated() {
    let query = this.$route.query
    // if (this.fromTo != query.fromTo || this.financeId != query.id || this.pageType != query.pageType) {
    this.fromTo = query.fromTo
    this.financeId = query.id
    this.pageType = query.pageType
    this.getFinanceDetail()
    // }
  },
  methods: {

    getFinanceDetail() {
      this.stepItemShow = true
      this.$http.post('/axh/find-finance-detail', { financeId: this.financeId }).then((res) => {
        if (res && res.result) {
          this.failMsg = res.result?.failMsg || ''
          this.fileSuffix = res.result?.fileSuffix || ''
          this.auditFinanceVo = res.result.auditFinanceVo
          this.pictureData = res.result?.auditFinanceVo?.reportProofImage?.split(',') || []
          this.axhAuditFinanceLogVos = res.result.axhAuditFinanceLogVos
          this.btnControl = res.result.btn
          this.stepItemShow = false
          if ((res.result.news && res.result.news.systemTypeId) || (res.result.auditFinanceVo && res.result.auditFinanceVo.systemTypeId)) {
            this.getNewTypeList()
          }
        }
      })
    },

    // 打开拒绝弹出
    openRefuseAuditWin() {
      this.refuseMsg = this.failMsg || ''
      this.refuseAuditVisible = true
    },
    // 同意拒绝报表审核 1同意 0拒绝
    agreePassAudit(type) {
      if (type == 1) {
        ElMessageBox.confirm('是否通过该报表的审核?', '警告', {
          confirmButtonText: '通过',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.agreePassAuditApi(type)
          })
          .catch(() => {
          })
      } else {
        if (!this.refuseMsg) {
          ElMessage.error('请输入拒绝理由')
          return
        }
        this.agreePassAuditApi(type)
      }
    },
    // 同意拒绝报表审核 接口调用
    agreePassAuditApi(type) {
      this.$http.post('/axh/finance-audit', {
        ids: this.financeId,
        isConsent: type,
        failMsg: this.refuseMsg
      }).then((res) => {
        if (res && res.result) {
          ElMessage.success('操作成功')
          this.goBackAndRefresh()
        }
      })
    },

    // 下载文件
    downloadFunFile1() {
      if (!this.auditFinanceVo.sourceFileUrl) {
        ElMessage.info('无文件地址')
        return
      }
      window.open(this.auditFinanceVo.sourceFileUrl)
    },
    // 审核记录
    journalingApproveShowFun() {
      ElMessage.success('审核记录窗口')
      // this.journalingApproveShow = true
      // this.journalingApproveShowLoading = true
      // this.$http
      //   .post('/axh/findAuditLogRecord', {
      //     financeId: this.financeId,
      //   })
      //   .then((res) => {
      //     if (res && res.result) {
      //       this.journalingApproveShowLoading = false
      //       this.findAuditLogRecordList = res.result
      //     }
      //   })
    },
    // close() { },

    // 保存修改
    async saveReport(e, reportProofImage, editMsg) {
      let reportTypeJson = {   // 资金 资源 资产 财务
        7: 1,
        8: 2,
        9: 3,
        3: 4,
        6: 4,
      }
      console.log('imageStrimageStrimageStr', reportProofImage);
      let formDate = new FormData()
      formDate.append('id', this.financeId)
      formDate.append('title', this.auditFinanceVo.financeTitle)
      formDate.append('dateTime', this.formatDate(this.auditFinanceVo.createTime, 'yyyy-MM-dd'))
      formDate.append('reportType', reportTypeJson[this.pageType])
      formDate.append('systemTypeId', this.auditFinanceVo.systemTypeId)
      formDate.append('reportProofImage', reportProofImage)
      request.post('/axh/report/forms/uploadReportForms', formDate, {
        'Content-Type': 'multipart/form-data',
      }).then((res) => {
        if (res && res.result) {
          if (editMsg == 1) {
            ElMessage.success('操作成功')
          } else if (editMsg == 2) {
            ElMessage.success('删除成功')
          } else if (editMsg == 3) {
            console.log('bc');
          } else {
            ElMessage.success('操作成功')
            this.getFinanceDetail()
          }
        }
      }).catch((err) => {
        ElMessage.error('操作失败')
      })
    },
    // 提交审核
    submitAudit() {
      ElMessageBox.confirm('是否提交审核吗?', '提示', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.saveReport('e', this.auditFinanceVo.reportProofImage, 3).then(() => {
          this.$http.post('/axh/report/forms/initiateAudit', { id: this.financeId }).then((res) => {
            if (res && res.result) {
              ElMessage.success('提交成功')
              this.getFinanceDetail()
            }
          })
        })
      })
    },
    // 删除报表
    deleteReport() {
      ElMessageBox.confirm('是否删除该报表?', '警告', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$http.post('/axh/report/forms/deleteReportForm', {
          id: this.financeId
        }).then((res) => {
          if (res && res.result) {
            this.goBackAndRefresh()
            ElMessage.success('删除成功')
          }
        })
      })
    },

    // 转化为草稿
    transferDraft() {
      this.$http.post('/axh/finance-cg', { id: this.financeId }).then((data) => {
        ElMessage.success('操作成功')
        this.getFinanceDetail()
      })
    },

    // 设置是否公开
    publicReport(isPublic) {
      let tipText = isPublic === 0 ? '是否公开该报表吗?' : '是否取消公开该报表吗?'
      ElMessageBox.confirm(tipText, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }).then(() => {
        this.$http.post('/axh/report/forms/publishReportForm', {
          id: this.financeId,
          isPublic: isPublic === 0 ? 1 : 0
        }).then((res) => {
          if (res && res.result) {
            ElMessage.success('操作成功')
            this.getFinanceDetail()
          }
        })
      })
    },

    //  查询上传系统类型（只要两个财务才有类型）
    getNewTypeList() {
      this.$http.post('/axh/newType/listById', {
        id: this.pageType,
      }).then((res) => {
        if (res && res.result) {
          this.oneTypeList = res.result
          this.systemTypeValue = res.result.filter((v) => {
            return v.id == this.financeData.systemTypeId
          })[0].name
        }
      })
    },

    // 打开凭证
    lookVoucher() {
      if (this.auditFinanceVo.reportProofImage) {
        this.pictureData = this.auditFinanceVo.reportProofImage.split(',')
      } else {
        this.pictureData = []
      }

      if (this.auditFinanceVo.currentStatus == -1) {
        this.pictureLibrarylayout = 'delect, upload'
      } else {
        this.pictureLibrarylayout = null
      }

      this.pictureLibraryShow = true
    },

    // 关闭凭证
    closeVoucher(data) {
      if (data.isEditImage) {
        this.getFinanceDetail()
      }
      this.pictureLibraryShow = false
    },

    // 上传凭证
    addVoucherImage(data) {
      let pictureData = JSON.parse(JSON.stringify(this.pictureData))
      pictureData = [...pictureData, ...data]
      this.pictureData = pictureData
      this.saveReport('e', pictureData.join(','), 1)
    },

    // 删除凭证
    delectPicture(data) {
      let pictureData = JSON.parse(JSON.stringify(this.pictureData))
      pictureData.splice(data, 1)
      this.pictureData = pictureData
      this.saveReport('e', pictureData.join(','), 2)
    },

    // 页面返回并刷新
    goBackAndRefresh() {
      this.$store.dispatch('closeTags', { path: this.$route.path }).then(() => {
        this.$router.go(-1)
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.journalingContent {
  padding: 20px;

  .journalingHead {
    background-color: $bgColorFFFFFF;
    margin-bottom: 20px;

    .headNav {
      position: relative;
      display: flex;
      padding: 16px;
      border-bottom: 1px solid #d8d8d8;

      // align-items: center;
      .txt1 {
        font-weight: 600;
        font-size: 18px;
        margin-right: 16px;
        line-height: 30px;
      }

      .btn {
        min-width: 52px;
        background: $bgColorEDEDED;
        color: $color999999;
        border: none;
        height: 30px;
        font-size: 14px;
        font-weight: 500;
        margin-right: 16px;
      }

      .point {
        color: $colorF05E5E;
        font-size: 16px;
        padding-top: 3px;
        max-width: 620px;
      }

      .czSpan {
        position: absolute;
        cursor: pointer;
        font-size: 16px;
        top: 25px;
        right: 16px;
        line-height: 18px;
        color: $color2C83E4;
        border-bottom: 1px solid $color2C83E4;
      }

      .downloadFile1 {
        position: absolute;
        cursor: pointer;
        font-size: 16px;
        top: 14px;
        border-radius: 4px;
        right: 16px;
        width: 100px;
        height: 36px;
        background-color: rgb(33, 211, 53);
        color: #fff;
        text-align: center;
        line-height: 36px;
        transition: all 0.1s ease;

        &:hover {
          background-color: rgba(33, 211, 53, 0.88);
        }
      }
    }

    .tipText {
      font-weight: 600;
      font-size: 16px;
      margin-left: 16px;
      margin-top: 10px;
      line-height: 30px;
      color: rgb(212, 91, 4);
    }

    .stepsNav {
      display: flex;
      padding: 20px 0 30px 0;
      min-height: 152px;
      justify-content: center;
      margin-right: -180px;

      .stepItem {
        .stepNum {
          display: flex;
          align-items: center;
          margin-bottom: 5px;

          img {
            width: 40px;
            height: 40px;
          }

          .iconLine {
            width: 200px !important;
            height: 0px;
            border-bottom: 2px solid #d8d8d8;
          }

          .iconOrder {
            width: 40px;
            height: 40px;
            font-size: 18px;
            display: flex;
            color: $color2C83E4;
            align-items: center;
            justify-content: center;
            background: #e6f0fc;
            border-radius: 50%;
            border: 2px solid #2c83e4;
          }
        }

        .stepCont {
          text-align: center;
          transform: translateX(-100px);
          padding: 0 10px;
          width: 240px;
          .tit {
            font-size: 16px;
            color: #2c83e4;
            margin-bottom: 5px;
          }

          p {
            font-size: 12px;
            color: #a8a8a8;
          }
        }
      }
    }
  }

  .btnContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;

    .rightCont {
      display: flex;
      margin-bottom: 18px;

      .btn {
        width: 100px;
        margin-left: 18px;

        .img {
          width: 22px;
          height: 22px;
          margin-right: 5px;
        }
      }
    }
  }


  .approveWin {
    padding: 20px 30px;

    .stepItem {
      display: flex;

      .stepNum {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 16px;

        .iconOrder {
          width: 40px;
          height: 40px;
          font-size: 18px;
          display: flex;
          background: #f3f3f3;
          color: #35353f;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          line-height: 1;
          border: 2px solid rgb(209, 207, 207);
        }

        .iconLine {
          flex: 1;
          min-height: 46px;
          border-right: 2px solid rgb(209, 207, 207);
        }
      }

      .stepCont {
        padding-bottom: 16px;

        .tit {
          display: flex;
          align-items: center;
          font-size: 16px;
          // color: #2c83e4;
          margin-bottom: 1px;

          .spanIcon {
            margin-left: 4px;
            cursor: pointer;
            width: 16px;
            height: 16px;
          }
        }

        p {
          font-size: 14px;
          color: #9e9e9e;
        }
      }
    }
  }

  // .state1 {
  //   color: $colorF05E5E !important;
  //   border-color: $colorF05E5E !important;
  // }

  .state1 {
    color: #a8a8a8 !important;
    border-color: #a8a8a8 !important;
  }

  .state3 {
    color: #f05e5e !important;
    border-color: #f05e5e !important;
  }

  .state0 {
    color: #2c83e4 !important;
    border-color: #2c83e4 !important;
  }

  .c00 {
    color: #2c83e4 !important;
  }

  .c11 {
    color: #a8a8a8 !important;
  }

  .c22 {
    color: #35353f !important;
  }

  .c33 {
    color: #f05e5e !important;
  }
}



.reportBox {
  width: 100%;
  margin: 10px auto;
  background-color: #fff;
  padding: 16px;

  .reportBoxImg {
    width: 100%;
  }
}
</style>
